<script setup>
import PopoverPoint from "../../components/PopoverPoint.vue";
const init = async () => {
  const response = await fetch("/point.json");
  const { RT_F, DTS } = await response.json();
  if (RT_F === 1) {
    if (map && map.value) {
     addVectorLayer(map, DTS.plan, "plan");
     addVectorLayer(map, DTS.workticket, "work");
     addVectorLayer(map, DTS.order, "people");
    }
  }
};
init();
const popContainer = ref(null);
const popTable = ref(null);
const { features, destory } = useMapClick();
const {
  open,
  close,
  create,
  destory: destoryOverlay,
} = useOverlay(map, popContainer);
const handlerClose = (e) => {
  console.log(e);
  close();
};
watch(features, (newValue, oldValue) => {
  console.log(newValue);
  useAnimateTo(
    { center: newValue.coordinate, duration: 500, zoom: 11 },
     ()=> {
      if (newValue.type === 1) {
        create(PopoverPoint, {
          foo: "foo",
          name: "123321123321",
          list: [1, 2, 2, 3],
          onHandlerClose: handlerClose,
        });
      } else {
        create(PopoverPoint, {
          foo: "foo",
          name: "abc-111111",
          list: [12, 23],
          onHandlerClose: handlerClose,
        });
      }
      open(newValue.coordinate);
    }
  );
});
</script>

<template>
  <Map class="w-full h-full"></Map>
</template>
